﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPage.master" %>
<%@ Register Assembly="Typps" Namespace="Typps" TagPrefix="t" %>
<%@ Import Namespace="System.IO" %>

<script runat="server">

    protected void ImagePicker_BrowseServerRequest(object sender,
        EventArgs e)
    {
        PopulateImageGalleryNode((ImagePicker)sender);
    }
    void PopulateImageGalleryNode(ImagePicker p)
    {
        string imagesDirectoryPath = Server.MapPath(@"~/ImagePicker/Images/");
        DirectoryInfo di = new DirectoryInfo(imagesDirectoryPath);
        /*not the best example to set titles but it's easy for demo*/
        string[] stevejobs = { "I want to put a ding in the universe", 
                                "Innovation distinguishes between a leader and a follower", 
                                "Design is not just what it looks like and feels like. Design is how it works"};
        if (di.Exists)
        {
            p.ImageGalleryNode.Text = "My Album";
            FileInfo[] files = di.GetFiles();
            int index = 0;
            foreach (FileInfo file in files)
            {
                string pathToImageFile = ResolveUrl(
        string.Format(@"~/ImagePicker/Images/{0}", file.Name));
                HTreeNode node = new HTreeNode();
                node.Text = file.Name;
                node.Value = pathToImageFile;
                node.ToolTip = stevejobs[index++];
                if (index == stevejobs.Length)
                    index = 0;//recycle, we just ran out of quotes
                p.ImageGalleryNode.ChildNodes.Add(node);
            }
        }
    }
    protected void ImagePicker3_SelectedImageChanged(object sender, SelectedImageEventArgs e)
    {
        /*in case there is a postback. readonly textbox does not preserve data set on the client*/
        textBox1.Text = e.SelectedImageUrl;
    }
    protected void ImagePicker2_SelectedImageChanged(object sender, SelectedImageEventArgs e)
    {
        ImageSelected.Src = e.SelectedImageUrl;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        //using masterpages so lets set this in code to take the clientID
        ImagePicker3.TargetControl = textBox1.ClientID;
    }
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        .image-border
        {
            background:white;
            border:1px solid gray;
            padding:5px;
            float:left;
            margin:5px;
        }
        .button
        {
            margin: 0 0 10px 10px;
        }
        .textbox
        {
            height: 25px;
            width: 200px;
        }
        #image1
        {
            border:0px solid green;
            /*a default styling. the bordre width is set by the image editor, 
            but since it does not style and border, you won't see it, thus this default*/
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <h1>Typps Image picker</h1>
        <h2>
            Responding to selected image client side</h2>
        <t:ImagePicker ID="ImagePicker1" runat="server" 
            EnableViewState="false" 
            ImageUploadEnabled="false"
            DisplayImageDesignerAttributes="false" 
            DisplayImageDesignerUrlField="false" 
            OnClientOkButton="ImagePicker1_OK"
            OnClientCancelButton="ImagePicker1_Cancel" 
            OnBrowseServerRequest="ImagePicker_BrowseServerRequest">
        </t:ImagePicker>
        <asp:Label ID="Label1" EnableViewState="false" Style="margin-left: 5px;" runat="server"
            Text="No selection made.."></asp:Label><span>(hint* click image icon in far left)</span>
        <br style="clear: both" />
        <h2>
            Responding to selected image server side</h2>
        <t:ImagePicker ID="ImagePicker2" runat="server" 
            EnableViewState="false" 
            ImageUploadEnabled="false"
            DisplayImageDesignerAttributes="false" 
            DisplayImageDesignerUrlField="false" 
            OnClientOkButton="ImagePicker2_OK"
            OnBrowseServerRequest="ImagePicker_BrowseServerRequest" 
            OnSelectedImageChanged="ImagePicker2_SelectedImageChanged">
        </t:ImagePicker>
        <asp:Button ID="buttonUpdateImage" CssClass="button" disabled="true" runat="server"
            Text="Update image below" /><span>(hint* first select an image using the image picker
                --image icon in far left)</span>
        <br style="clear: both" />
        <div class="image-border">
            <img alt="" runat="server" id="ImageSelected" src="~/Shared/Images/noselection.jpg"
                style="height: 210px; width: 210px" /></div>
        <br style="clear:both"/>
        <h2>
            Specifying a target element/control to launch the Image Picker</h2>
        <t:ImagePicker ID="ImagePicker3" runat="server" 
            EnableViewState="false" 
            ImageUploadEnabled="false" 
            DisplayImageDesignerAttributes="false" 
            DisplayImageDesignerUrlField="false"
            OnClientOkButton="ImagePicker3_OK" 
            OnBrowseServerRequest="ImagePicker_BrowseServerRequest"
            OnSelectedImageChanged="ImagePicker3_SelectedImageChanged">
        </t:ImagePicker>
        <asp:TextBox ID="textBox1" CssClass="textbox" ReadOnly="true" EnableViewState="false"
            runat="server"></asp:TextBox>(Hint* The target is the textbox. Click it to launch
        the image picker)
        <br style="clear: both" />
        <h2>
            Editing the img element</h2>
        <p>(The image being edited below is done automatically by the Image Picker. We only set TargetImageElementId.)</p>
        <t:ImagePicker ID="ImagePicker4" runat="server" 
            EnableViewState="false" 
            ImageUploadEnabled="false"
            OnClientTargetControlAction="ImagePicker4_TargetClick"
            TargetImageElementId="image1"
            OnBrowseServerRequest="ImagePicker_BrowseServerRequest">
        </t:ImagePicker> (Hint* click the image icon and browse, select an image and set properties in the image designer dialog)
        <br style="clear: both" />
        <div>
            <img alt="" id="image1" src="../Shared/Images/noselection.jpg" /></div>
    <script type="text/javascript">
        var label=$get('<%=Label1.ClientID %>');
        var buttonUpdateImage=$get('<%=buttonUpdateImage.ClientID %>');
        var textBox1=$get('<%=textBox1.ClientID %>');
        var image=$get('image1');
        function ImagePicker1_OK(sender,args) {/*user clicked OK button*/
            var url=args.get_commandArgument();
            if(label!=null)
                label.innerHTML=url;
        }
        function ImagePicker1_Cancel(sender,args) {/*user clicked Cancel button*/
            if(label!=null)
                label.innerHTML="Selection cancelled, but why? :(";
        }
        function ImagePicker2_OK(sender,args) {/*user clicked OK button*/
            if(buttonUpdateImage!=null)
                buttonUpdateImage.disabled=false;
        }
        function ImagePicker3_OK(sender,args) {/*user clicked OK button*/
            if(textBox1!=null)
                textBox1.value=args.get_commandArgument();
        }
        function ImagePicker4_TargetClick(sender,args)
        {
            //just in case you want to do something
            //on target control clicked(the control/element that launched the image picker)
        }
        function ImagePicker5_OK(sender,args) {/*user clicked OK button*/
            var url=args.get_commandArgument();
            /*args is of type Typps.ImageDesignerEventArgs();
            and following is the properties breakdown.*/
           /*
           if(image==null)return;
           image.src=url;
           image.alt=args.get_alt();
            var width=args.get_width();
            var height=args.get_height();
            var borderWidth=args.get_border();
            if(width>0)
               image.style.width=width+'px';
            if(height>0)
               image.style.height=height+'px';
            var align=args.get_align();
            if(align.toLowerCase()!='none')
                Typps.Utility.setFloat(image,align);
            else
                Typps.Utility.setFloat(image,'');
            if(borderWidth>0)
               image.style.border=String.format('{0}px solid #000',borderWidth);
            else
                image.style.borderWidth=0;
           image.style.margin=args.get_margin()+'px';
           image.style.padding=args.get_padding()+'px';
         */
         /*
            The code above is commented out because we set targetImageElementId directly on ImagePicker4. 
            This allows the image picker
            to set all the above properties automatically for you. However if you need to do this manually, you may
            follow the commented code above
         */
        }
    </script>
</asp:Content>
